<template>
	<view class="box">
		<view class="top hidden">
			<view class="top_h bg_ff6a00">
				<view class="font_31 text_bold">提现总金额</view>
				<view class="flex2 account_m2">
					<view class="top_num text_bold">{{balance}}</view>
					<view class="font_31 text_bold account_m1">元</view>
				</view>
			</view>
			<view class="flex8 top_b">
				<view class="title flex3">
					<view></view>
					<view class="font_38 text_bold">提现记录</view>
				</view>
				<view class="flex9" @click="is_show = true;">
					<view class="flex7 order_p1">
						<view class="font_27 color_7b" style="margin-right: 10rpx;">{{mouth}}</view>
						<van-icon name="arrow-down" color="#7B7B7B" />
					</view>
				</view>
			</view>
		</view>
		<view class="content hidden" v-if="is_load && data_list.length == 0">
			<image src="../../static/image/user/h@2x.png" class="no_data"></image>
		</view>
		<view class="content hidden" v-if="is_load && data_list.length != 0">
			<view class="list van-hairline--bottom" v-for="item in data_list" :key="item">
				<view class="font_31 flex8">
					<view>提现日期</view>
					<view>提现金额</view>
				</view>
				<view class="font_27 color_7b flex8 account_m3">
					<view>{{item.createtime_text}}</view>
					<view style="color: orangered; font-size: 30rpx;">￥{{item.price}}</view>
				</view>
			</view>
			<view class="flex7 font_27 color_999" style="height: 100rpx;">{{Text}}</view>
		</view>
		<!-- 年月 -->
		<van-popup position="bottom" :show="is_show">
			<van-datetime-picker type="year-month" :value="currentDate" :max-date="minDate" @cancel="is_show = false;"
				@confirm="get_time" />
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mouth: '',
				page: 1,
				Text: '',
				data_list: [],
				is_load: false,
				balance: '--',
				is_show: false,
				is_last_page: false,
				minDate: new Date().getTime(),
				currentDate: new Date().getTime(),
			}
		},
		onLoad() {
			this.mouth = this.get_date(new Date().getTime());
			// this.managerIndex();
			this.getBalance();
		},
		onReachBottom() { //上拉加载
			if (!this.is_last_page) {
				this.page++;
				this.Text = '加载中...';
				this.getBalance();
			}
		},
		methods: {
			// 门店信息
			managerIndex() {
				this.$http.get(this.$api.managerIndex).then(res => {
					this.balance = res.data.balance;
				})
			},
			// 账户资产
			getBalance() {
				this.$http.get(this.$api.getWithdrawListApi, {
					page: this.page,
					month: this.mouth
				}).then(res => {
					this.is_load = true;
          console.log('res===================>',res)
					this.data_list = this.data_list.concat(res.data.list.data);
          this.balance = res.data.total_price;
					if (this.page == res.data.list.last_page) {
						this.is_last_page = true;
						this.Text = '已加载全部'
					} else {
						this.is_last_page = false;
					}
				})
			},
			// 年月
			get_time(e) {
				this.is_show = false;
				this.mouth = this.get_date(e.detail);
				this.page = 1;
				this.Text = '';
				this.data_list = [];
				this.is_load = false;

				this.getBalance();
			},
			get_date(value) {
				var date = new Date(value);
				var Y = date.getFullYear();
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				var h = date.getHours();
				var m = date.getMinutes();
				var s = date.getSeconds();

				return Y + '-' + M;
			},
		}
	}
</script>

<style lang="less">
	.box {
		padding: 416rpx 0 0;
		box-sizing: border-box;
	}

	.top {
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		position: fixed;
		background-color: #fff;
	}

	.top_h {
		width: 704rpx;
		padding: 42rpx 23rpx 32rpx;
		margin: 23rpx auto;
		border-radius: 12rpx;
		box-sizing: border-box;
	}

	.top_num {
		font-size: 92rpx;
		line-height: 129rpx;
	}

	.account_m1 {
		margin-bottom: 22rpx;
		margin-left: 10rpx;
	}

	.account_m2 {
		margin: 24rpx 0 0 0;
	}

	.account_m3 {
		margin: 4rpx 0 0 0;
	}

	.title {
		// margin: 31rpx 0 4rpx 0;

		view {
			&:first-child {
				width: 10rpx;
				height: 48rpx;
				border-radius: 6rpx;
				margin-right: 10rpx;
				background-color: #EE8332;
			}
		}
	}

	.order_p1 {
		padding: 10rpx;
	}

	.top_b {
		margin: 46rpx 36rpx 23rpx 46rpx;
	}

	.no_data {
		width: 400rpx;
		height: 336rpx;
		margin: 100rpx auto;
	}

	.content {
		padding: 0 46rpx;
	}

	.list {
		padding: 34rpx 0;
	}

	.box /deep/ .van-picker__cancel {
		color: #999;
	}

	.box /deep/ .van-picker__confirm {
		color: #FF6A00;
	}

	.box /deep/ .van-hairline--bottom:after {
		border-bottom-color: #ddd;
	}
</style>
